<template>
    <div class="container">
        <!-- 搜索框部分 -->
        <div class="head">
            <el-row>
                <el-col :span="6">
                    <img @click="goHome" src="@/assets/logo.png" alt="">
                </el-col>
                <el-col :span="12">
                    <div class="search">
                        <el-input id="input_search" placeholder="请输入书名、作者、出版社" v-model="keywords" @keyup.enter.native="searchBooksByKeyword">
                            <i slot="suffix" class="el-input__icon el-icon-search" @click="searchBooksByKeyword"></i>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="buyCar">
                        <el-button size="small" style="background:#b11e22;color:#fff" @click="goShopCar">
                            <i class="iconfont icon-gouwuchekong"></i>
                            购物车
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 轮播图部分 -->
        <div class="nav" v-if="!isSearch">
            <div class="nav_box">
                <div class="nav_left">
                    <div class="outerBox" v-for="item in categoryList" :key="item.id">
                        <div>{{item.name }}</div>
                        <div class="innerBox">
                            <span v-for="m in item.children" :key="m.id" @click="findCategoryById(m)">
                                {{ m.name }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="nav_center">
                    <el-carousel :interval="3000" arrow="hover" height="240px">
                        <el-carousel-item v-for="(item,index) in 4" :key="index">
                            <img src="@/assets/ad1.png" alt="" width="580px">
                        </el-carousel-item>
                    </el-carousel>

                </div>
                <div class="nav_right">
                    <div class="rig_title">
                        <h3>杰普快报</h3>
                        <span>更多&gt</span>
                    </div>
                    <ul>
                        <li><a href="#"> 中央经济工作会议在北京举行 </a></li>
                        <li><a href="#"> 中越两国关系新定位的深刻内涵 </a></li>
                        <li><a href="#"> 新能源车迎来寒潮暴雪大考热 </a></li>
                        <li><a href="#"> 网易成中国市值第四大互联网公司 </a></li>
                    </ul>

                </div>
            </div>
        </div>
        <!-- 商品展示部分 -->
        <div class="product" v-loading="loading">
            <Product :booksList="booksList" :title="title"></Product>
        </div>

    </div>
</template>

<script>
import Product from "./Product.vue";
import { get } from "@/utils/request";
export default {
    data() {
        return {
            booksList: [],
            title: "热门推荐",
            keywords: "",
            categoryList: [],
            isSearch: false,
            loading: false,
        };
    },
    components: {
        Product,
    },
    created() {
        this.getCategoryList();
        this.getBooksList();
    },
    methods: {
        // 跳转到首页
        goHome() {
            console.log(2222);
            this.isSearch = false;
            this.getBooksList();
            this.$router.push({ path: "/" }, () => {});
        },
        // 跳转到 购物车页面
        goShopCar() {
            this.$router.push("/shopCar");
        },
        // 获取书籍分类信息
        getCategoryList() {
            get("/category/list").then((res) => {
                if (res && res.data) {
                    console.log(99999, res.data);
                    this.categoryList = res.data;
                }
            });
        },
        //图书信息检索根据分类
        findCategoryById(row) {
            get(`/book/findByCategory/${row.id}`).then((res) => {
                console.log(22222, res);
                this.booksList = res.data;
                this.title = row.name;
            });
        },

        // 获取图书的列表
        getBooksList() {
            get("/book/showBooks").then((res) => {
                if (res && res.data) {
                    this.booksList = res.data;
                    this.title = "热门推荐";
                }
            });
        },
        // 搜索框搜索关于书籍信息
        searchBooksByKeyword() {
            if (!this.keywords) return;
            this.isSearch = true;
            this.booksList = [];
            this.loading = true;
            this.title = "";
            get("/book/searchBook", {
                query: this.keywords,
            }).then((res) => {
                if (res && res.data) {
                    console.log(res);
                    this.booksList = res.data;
                    this.loading = false;
                    this.title = "查询结果如下：";
                }
                // console.log(2222, res);
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.container {
    min-height: calc(100vh - 300px);
    .head {
        padding: 20px 0;
        width: 1000px;
        margin: 0 auto;
        height: 100px;
        img {
            &:hover {
                cursor: pointer;
            }
        }
        .el-col {
            padding: 0 15px;
        }
        .search {
            padding: 10px 15px;
        }
        .buyCar {
            padding: 10px 15px;
            float: right;
        }
        .svg-container {
            padding: 6px 5px 6px 15px;
            color: #fff;
            vertical-align: middle;
            width: 30px;
            display: inline-block;
        }
    }

    .nav {
        background-color: #f4f4f4;
        .nav_box {
            display: flex;
            padding: 10px 0;
            width: 1000px;
            margin: 0 auto;
            div {
                background-color: #fff;
            }
            .nav_left {
                width: 200px;
                position: relative;
                .outerBox {
                    height: 30px;
                    line-height: 29px;
                    padding-left: 15px;
                    color: #333;
                    font-size: 14px;
                    border-bottom: 1px solid #ddd;

                    & > div:first-child {
                        &:hover {
                            cursor: pointer;
                            color: skyblue;
                        }
                    }

                    .innerBox {
                        display: none;
                        position: absolute;
                        left: 201px;
                        top: 0;
                        background-color: #fff;
                        z-index: 9999;
                        width: 400px;
                        min-height: 240px;
                        border: 1px solid #f7f7f7;
                        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
                        transition: top 0.25s ease;
                        span {
                            margin: 0 15px;
                            &:hover {
                                text-decoration: underline;
                                cursor: pointer;
                                color: skyblue;
                            }
                        }
                    }
                    &:hover {
                        .innerBox {
                            display: block;
                        }
                    }
                }
            }
            .nav_center {
                flex: 1;
                margin: 0 10px;
                height: 240px;
            }
            .nav_right {
                width: 200px;
                padding: 10px;
                height: 240px;
                overflow: hidden;
                .rig_title {
                    display: flex;
                    justify-content: space-between;
                    line-height: 34px;
                    align-items: center;
                    span {
                        font-size: 14px;
                        &:hover {
                            color: #b11e22;
                            cursor: pointer;
                        }
                    }
                }
                ul {
                    padding: 5px 0;
                    li {
                        line-height: 20px;
                        &:hover {
                            color: #b11e22;
                        }
                    }
                }
            }
        }
    }
    .product {
        overflow: hidden;
    }
}
</style>
